<template>
<!--课程详情-->
  <div v-title :data-title="live.liveTitle">
    <headers></headers>
    <div class="padding88">
      <div class="divider">
        <div class="auto">
          <router-link to="/"> 首页</router-link><span>></span><router-link :to="{path : 'zhibolist'}">在线直播列表</router-link><span>></span>{{live.liveTitle}}
        </div>
      </div>
    </div>
    <div class="class_content">
      <div class="auto clearfix">
        <div class="left pull-left">
          <img :src="live.liveImage" alt="" width="800" height="448" style="object-fit: contain">
          <div class="bottom" >
            <a href="javascript:;" @click.prevent="shouCang">
              <img src="../../assets/yishoucang.png" alt="" width="18" v-if="isCollecon == 1">
              <img src="../../assets/shoucang.png" alt="" width="18" v-else>
            </a>
            收藏
            <div class="pull-right"><span>分享</span>
              <a href="javascript:;" class="weixinshare">
                <img src="../../assets/qq.png" alt="" width="25">
                <img :src="QRCode" alt="" class="share_img" width="100">
              </a>
              <a :href="weiboShare" target="_blank" rel="noopener noreferrer"><img src="../../assets/weibo.png" alt="" width="25" @click="liveShare"></a>
              <a :href="kongjianShare" target="_blank" rel="noopener noreferrer"><img src="../../assets/kongjian.png" alt="" width="25" @click="liveShare"></a>
            </div>
          </div>
        </div>
        <div class="right pull-right">
          <ul>
            <li >课程名称： </li>
            <li>{{live.liveTitle}}</li>
            <li >开播时间：</li>
            <li>{{live.liveTime}}</li>
          </ul>

        </div>
      </div>
    </div>
    <div class="auto names_title clearfix">
      <div class="pull-left">
        <p>{{live.liveTitle}}</p>
        <p v-if="isApply === 1 || (live.isVipFree === 0 && isVip > 0) || live.regFee === 0">免费</p>
        <p v-else>￥{{live.regFee}}</p>
      </div>
      <div class="bottom" v-if="isApply === 1 || (live.isVipFree === 0 && isVip > 0) || live.regFee === 0">
        <Button  class="pull-right"  @click="goLive">进入直播</Button>
      </div>
      <div class="bottom" v-else>
        <Button  class="pull-right"  @click="apply">报名</Button>
      </div>
    </div>
    <div class="auto clearfix twopart padding250">
      <div class="left pull-left">
        <Tabs :animated="false" value="name1">
          <TabPane label="讲师介绍" name="name1">
              <p class="avatar"><img :src="lecturer.lecturerImg" alt="" width="28">{{lecturer.lecturerName}}</p>
              <div class="introduce">
                <p v-html="lecturer.content"></p>
              </div>
          </TabPane>
          <TabPane label="课程介绍" name="name2" class="pinglun">
              <p class="avatar"><img src="../../assets/des.png" alt="" width="30">课程介绍</p>
              <div class="introduce" v-html="live.liveContent">
              </div>
          </TabPane>
        </Tabs>
      </div>
      <div class="right pull-right">
        <p class="title">推荐课程</p>
        <ul>
          <li class="clearfix" @click="detail(index)" v-for="(recommend,index) in recommends">
            <div class="curse pull-left">
              <img :src="recommend.courseImage" alt="" width="151" height="81">
              <div class="bg"></div>
              <img src="../../assets/play.png" alt="" width="26" class="play">
              <div class="vip" v-if="recommend.isVipFree === 0 && recommend.isFree === 1">VIP</div>
            </div>
            <div class="pull-left shipin wid170">
              <p>{{recommend.courseTitle}}</p>
              <p>{{recommend.courseCount}}视频 <img src="../../assets/usericon.png" alt="" width="16"> {{recommend.lecturerName}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <asides></asides>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
    <loginmodal  ref="loginE"></loginmodal>
  </div>

</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }


  .pinglun{
    .ivu-form-item{
      margin-bottom: 10px;
    }
    .textarea{
      position: relative;
      button{
        position: absolute;
        background-color: #957960;
        color: #fff;
        height: 94px;
        width: 95px;
        right: 0;
        font-size: 19px;
        top:0;
      }
    }
    .tip{
      font-size: 14px;
      color: #999;
      margin: 0px 0 15px;
    }
    .all{
      /*font-size: 16px;*/
      font-size: 14px;
      color: #000;
      margin-bottom: 20px;
    }
    .list>li{
      border-bottom: 1px dashed #dbdbdb;
      padding-bottom: 15px;
      margin-bottom: 15px;
      .left_content {
        img{
          border-radius: 50%;
        }
        ul{
          margin: 5px 0  0 15px ;
          li{
            /*font-size: 16px;*/
            font-size: 14px;
            color: #000;
            line-height: 30px;
          }
          li:last-child{
            color: #999;
          }
        }
      }
      .pull-right{
        /*font-size: 16px;*/
      font-size: 14px;
        color: #999;
        img{
          margin-left: 10px;
          vertical-align: baseline;
        }
      }
      .other_pinglun{
        background-color: #f9f9f9;
        margin:15px 0 0 55px;
        padding: 20px;
        li{
          /*font-size: 16px;*/
          font-size: 14px;
          color: #000;
          line-height: 25px;
        }
      }
    }
    .list>li:last-child{
      border-bottom: none;
    }
    .look{
      background-color: #f9f9f9;
      height: 56px;
      /*font-size: 16px;*/
      font-size: 14px;
      color: #999;
      border:none;
    }
    .ivu-btn:focus{
      box-shadow: none;
    }
  }
  .ivu-icon{
    font-size: 15px;
    color: #999;
    margin-bottom: 3px;
  }
  .model_header{
    color:#fff;
    text-align:center;
    background-color: #957960;
    height: 77px;
    line-height: 77px;
    font-size: 28px;
  }
  .model_content{
    padding: 30px 50px;
    form img{
      position: absolute;
      left: 10px;
      top:14px
    }
    a{
      display: block;
    }
    .ivu-input{
      border-radius: 0;
      display: inline-block;
      width: 80%;
      height: 61px;
    }
    button{
      background-color: #957960;
      border-color: #957960;
    }
    .send{
      position:absolute ;
      right: 0;
      top: 0;
      height: 61px;
      color: #fff;
      /*font-size: 16px;*/
      font-size: 14px;
    }
    .loginbtn{
      height: 63px;
      font-size: 20px;
    }
  }
  .other{
    /*font-size: 16px;*/
    font-size: 14px;
    color: #999;
    p{
      margin-top: 20px;
    }
    span{
      margin-right: 40px;
    }
    a{
      display: inline-block;
    }
    .margin20{
      margin: 0 10px;
    }
    img{
      vertical-align: bottom;
    }
  }
  .divider{
    height: 60px;
    background-color: #2F261E;
    font-size: 14px;
    line-height: 60px;
    text-align: left;
    color: #fff;
    span{
      margin: 0 10px;
    }
    a{
      color: #fff;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
  }
  .class_content{
    background-color: #121212;
  }
  .names_title{
    background-color: #fff;
    color: #000;
    font-size: 22px;
    padding: 30px;
    text-align: left;
    margin-top: 20px;
    p:nth-child(2){
      color: #FF3300;
      margin-top: 5px;
    }
    button{
      margin-left: 10px;
      background-color: #957960;
      border-color: #957960;
      height: 41px;
      width: 159px;
      font-size: 16px;
      color: #fff;
      margin-top: 15px;
    }
  }
  .auto.twopart.clearfix{
    border:none;
    margin-top: 40px;
    .left{
      padding: 20px;
      margin-right: 20px;
      background-color: #fff;
    }
    .right{
      width: 380px;
      background-color: #fff;
      .title{
        font-size: 16px;
        color: #000;
        border:none;
      }
      ul{
        padding-top: 0;
        background-color: #fff;
        height: auto;
      }
      li{
        cursor: pointer;
        line-height: normal;
        margin-left: 0;
        margin-bottom: 10px;
        p.pull-left{
          position: relative;
          span{
            background-color: #ff9900;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding: 0px 5px;
            position: absolute;
            bottom: 15px;
            left: 0;
          }

        }
        .wid170{
          width: 170px;
        }
        div.pull-left{
          padding: 0;
          /*font-size: 16px;*/
          font-size: 14px;
          color: #333;
          margin-left: 20px;
          height: auto;
          p:first-child{
            font-weight: normal;
            height: 48px;
            margin: 0;
          }
          p:last-child{
            font-size: 14px;
            font-weight: normal;
            img{
              vertical-align: middle;
              margin-right: 10px;
            }
            span{
              margin-left: 20px;
            }
          }

        }
        div.curse{
          position: relative;
          margin-left: 0;
          .bg{
            width: 151px;
            height: 81px;
            position: absolute;
            top:0;
            left: 0;
            background-color: rgba(0,0,0,0.39);
          }
          .play{
            position: absolute;
            z-index: 9;
            top:50%;
            left: 50%;
            margin-left: -13px;
            margin-top: -13px;
          }
          .vip{
            padding: 0;
            background: url("../../assets/vip.png") no-repeat;
            width: 24px;
            height: 36px;
            background-size: 100% 100%;
            font-size: 12px;
            color: #fff;
            line-height: 30px;
            text-align: center;
            position: absolute;
            right: 0;
            top:0
          }
          span{
            background-color: #ff9900;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding: 3px 5px;
            position: absolute;
            bottom: 10px;
            left: 0;
          }
        }
        div.shipin p:last-child{
          font-size: 14px;
          color: #999;
          img{
            vertical-align: middle;
            margin: 0 5px 0 20px;
          }
        }
      }

    }
  }
  .auto.clearfix{
    position: relative;
    .left{
      width: 800px;
      text-align: left;
      .bottom{
        font-size: 14px;
        color: #999;
        padding: 30px 0 30px 20px;
        background-color: #191919;
        a{
          color:#999;
        }
        .weixinshare{
          position: relative;
          .share_img{
            position: absolute;
            top:23px;
            left: 0;
            background-color: #fff;
            padding: 5px;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
            z-index: 2;
            display: none;

          }
          &:hover .share_img{
            display: block;
            transition: all 0.3s;
          }
        }
        img{
          vertical-align: middle;
        }
        >img{
          margin-right: 10px;
        }
        >a{
          margin-right: 10px;
        }
        >img:nth-of-type(2){
          margin-left: 30px;
        }
        .pull-right{
          span{
            margin-right: 10px;
          }
          img{
            margin: 0 5px;
          }
        }
      }
      .avatar{
        font-size: 16px;
        color: #000;
        padding-top: 12px;
        img{
          margin-right: 20px;
          vertical-align: middle;
          border-radius: 50%;
        }
      }
      .introduce{
        margin-left: 48px;
        line-height: 33px;
        /*font-size: 16px;*/
        font-size: 14px;
        color: #666;
        img{
          max-width: 712px;
          object-fit: contain;
        }
      }
    }
    .right{
      width: 388px;
      padding-left: 12px;
      text-align: left;
      background-color: #2a2a2a;
      .title{
        font-size: 24px;
        color: #000;
        border-bottom: 1px solid #f5f5f5;
        padding: 20px 10px 15px;
      }
      .bottom{
        color:#ff3300;
        font-size: 24px;
        position: absolute;
        bottom: 20px;
        right: 20px;
        button{
          margin-left: 10px;
          background-color: #957960;
          border-color: #957960;
          height: 37px;
          width: 150px;
          font-size: 14px;
          color: #fff;

        }
      }
      ul{
        font-size: 14px;
        color: #fff;
        padding-right: 10px;
        background-color: #191919;
        padding-top: 10px;
        height: 534px;
        li{
          line-height: 30px;
          margin-left: 30px;
          margin-bottom: 10px;
        }
      }

    }
  }


</style>
<script type="text/ecmascript-6">
  import asides from '../template/aside'
  import headers from '../template/header'
  import footers from '../template/footer'
  import loginmodal from '../template/loginmodal'
  import {liveDetailWeb,collecon,addOrder,centreInfoWeb,shareApp} from '../../http'
  import {getStore} from '../../storage'
  import imgPathFilter from '../../myFilters'
    export default {
        name: 'detail',
        props: {},
        data() {
            return {
              kongjianShare:'',         //空间分享
              weiboShare:'',            //微博分享
              live:'',                  //直播
              lecturer:'',              //讲师
              recommends:'',            //推荐课程
              isCollecon:'',            //用户是否收藏
              isApply:'',               //用户是否购买
              isVip:'',                 //用户是否是Vip
              QRCode:'',                //二维码
              liveId:this.$route.query.liveId,  //直播Id
              url:window.location.href,
              isSpinShow:false,
            };
        },
        methods: {
          //分享获取积分
          liveShare(){
            centreInfoWeb().then(res => {
              if(res.code === 200) {
                //用户收藏
                shareApp({courseId:this.liveId,type:4}).then(res => {
                }).catch()
              }
            })
          },
          //直播购买
          apply(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  liveDetailWeb({liveId: this.liveId, url: this.url}).then(res => {
                    //直播上架状态，允许购买
                    if (res.data.list.liveStatus === 1) {
                      //创建订单
                      addOrder({type: 'OT_LIVE', targetId: this.liveId, applyType: '3'}).then(res => {
                        this.isSpinShow = false;
                        if (res.code === 200) {
                          this.$router.push({
                            name: 'buy',
                            query: {
                              orderId: res.data.orderId
                            }
                          })
                        } else {
                          this.$Notice.warning({
                            title: "购买提醒",
                            desc: res.info,
                            duration: 3,
                          });
                        }
                      }).catch()
                    } else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: '购买提醒',
                        desc: '当前直播已下架！',
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.$refs.loginE.showModal();
                }
              }).catch()
            }
          },
          //观看直播
          goLive(){
            //用户是否登录
            centreInfoWeb().then(res => {
              if(res.code === 200) {
                //用户已购买直播
                if(this.isApply === 1 || (this.live.isVipFree === 0 && this.isVip > 0) || this.live.regFee === 0) {
                  window.location.href = this.url;
                }
              }else{
                this.$refs.loginE.showModal();
              }
            }).catch()
          },
          //推荐课程查看
          detail(index){
            let cour = this.recommends[index];
              this.$router.push({
                name: 'coursedetail',
                query:{
                  courseId : cour.courseId,
                }
              })
          },
          //收藏
          shouCang : function () {
            //用户是否登录
            centreInfoWeb().then(res => {
                if(res.code === 200) {
                  //用户收藏
                  collecon({token: getStore('token'), targetId: this.liveId, type: '2', optType: '1'}).then(res => {
                    if (res.data === 1) {
                      this.isCollecon = 1;
                    }
                    if (res.data === 3) {
                      this.isCollecon = 0;
                    }
                  }).catch()
                }else{
                  this.$refs.loginE.showModal();
                }
            }).catch()
          },
          getLive(){
            //获取直播详情
            liveDetailWeb({liveId: this.liveId, url: this.url}).then(res => {
              this.isSpinShow = false;
              //浏览器标题
              this.$route.meta.title = res.data.list.liveTitle;
              this.isCollecon = res.data.isCollecon;
              this.isApply = res.data.isApply;
              this.isVip = res.data.isVip;
              this.live = res.data.list;
              this.url = res.data.list.liveUrl;
              this.lecturer = res.data.lecturer;
              this.recommends = res.data.recommends;
              this.QRCode = "data:image/png;base64," + res.data.QRCode;
              //分享
              this.kongjianShare = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=" + encodeURIComponent(this.live.liveTitle) + "&url=" + encodeURIComponent(res.data.urlShare) + "&summary=" + encodeURIComponent(res.data.content.replace(/&nbsp;/g,'')) + "\"";
              this.weiboShare = "http://service.weibo.com/share/share.php?title=【" + encodeURIComponent(this.live.liveTitle) + "】" + encodeURIComponent(res.data.content.replace(/&nbsp;/g,'')) + "&url=" + encodeURIComponent(res.data.urlShare) + "&appkey=411882175" + "\"";
            }).catch()
          },
        },
        created() {
          if(this.isSpinShow === false) {
            this.isSpinShow = true;
            if (getStore('token') !== null && getStore('token') !== undefined && getStore('token') !== '') {
              //获取用户信息
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  this.getLive();
                } else {
                  this.getLive();
                }
              }).catch()
            } else {
              this.getLive();
            }
          }
        },
        components: {
          asides,
          headers,
          footers,
          loginmodal
        }
    }
</script>
